<template id="">
  <div class="CalcDate" id="CalcDate">
    <el-form ref="form" :model="form" label-width="80px" @submit.native.prevent>
      <el-form-item label="开始日期:">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期"
          v-model="form.s_date" style="width: 102%;" >
          </el-date-picker>
        </el-col>
      </el-form-item>
      <el-form-item label="结束日期:">
        <el-col :span="11">
          <el-date-picker type="date" placeholder="选择日期" v-model="form.e_date" style="width: 102%;" @change="calcDateSub">
          </el-date-picker>
        </el-col>
      </el-form-item>
      <el-row>
        <el-col :span="13">
          <el-form-item label="日期间隔:">
            <el-input v-model.number="form.sub" @keyup.enter.native='calcDateEnd' style="width: 100%;"></el-input>
          </el-form-item>
        </el-col>
      </el-row>

      <el-form-item>
        <el-button type="primary" @click='calcDateSub'>计算日期间隔</el-button>
        <el-button type="primary" @click='calcDateEnd'>计算结束日期</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
  export default {
    name: 'CalcDate',
    data() {
      return {
        form: {
          s_date: new Date(),
          e_date: new Date(),
          sub: 0
        },
        s_error_message:"不要玩我,必须选择开始日期!",
        e_error_message:"不要玩我,必须选择结束日期!",
      }
    },
    methods: {
      calcDateSub(){
        if(this.form.s_date == null || typeof(this.form.s_date) == "undefined"){
          alert(this.s_error_message);
          return;
        }
        if(this.form.e_date == null || typeof(this.form.e_date) == "undefined"){
          alert(this.e_error_message);
          return;
        }
        let st = new Date();
        st.setFullYear(this.form.s_date.getFullYear())
        st.setMonth(this.form.s_date.getMonth())
        st.setDate(this.form.s_date.getDate())
        st.setHours(0)
        st.setMinutes(0)
        st.setSeconds(0)
        st.setMilliseconds(0)
        let et = new Date();
        et.setFullYear(this.form.e_date.getFullYear())
        et.setMonth(this.form.e_date.getMonth())
        et.setDate(this.form.e_date.getDate())
        et.setHours(0)
        et.setMinutes(0)
        et.setSeconds(0)
        et.setMilliseconds(0)
        this.form.sub=parseInt((et.getTime()-st.getTime())/86400000);
      },
      calcDateEnd(){
        if(this.form.s_date == null || typeof(this.form.s_date) == "undefined"){
          alert(this.s_error_message);
          return;
        }
        let st = new Date();
        st.setFullYear(this.form.s_date.getFullYear())
        st.setMonth(this.form.s_date.getMonth())
        st.setDate(this.form.s_date.getDate())
        st.setHours(0)
        st.setMinutes(0)
        st.setSeconds(0)
        st.setMilliseconds(0)
        this.form.e_date = new Date(st.getTime()+this.form.sub*86400000)
      }
    },
    created() {}
  }
</script>

<style scoped>

</style>
